@import "flex.css";
@import "footer.css";

#footer
{
    position: absolute;
    bottom: 0;
    width: 100%;
}

:root
{
    --color-zapp:rgb(195,84,237);

    --color-grisclaro: #4c4c4c;
    --color-grisoscuro: #3a3a3a;
}
 
#zp
{
    color: var(--color-zapp);
    display: inline;
}

body
{
    background-image: linear-gradient(var(--color-grisoscuro),var(--color-grisclaro),var(--color-grisoscuro));
    font-family: 'Poppins' !important;
    margin: 0;
    overflow-x: hidden;
    padding: 0;
}

#header
{
    position: fixed;
    top: 0;
    width: 100%;
    background-image: linear-gradient(to bottom, var(--color-grisclaro), var(--color-grisoscuro));
    z-index: 1;
}

button
{
    text-align: center;
    background-image: linear-gradient(to bottom, var(--color-grisclaro), var(--color-grisoscuro));
    border: 2px solid var(--color-zapp);
    border-radius: 8px;
    margin: 1em;
    color: var(--color-zapp);
}

.nos
{
    padding: 3vh 3vw;
    padding-bottom: auto;
    margin-top: 2rem;   
}

#headerLogo
{
    width: 25rem;
}

.logo
{
    width: 160px;
    transition: 0.3s;
}

.logo-container
{
    text-align: center;
    width: 100%;
    padding: 0;
}

h1,h2,h3,h4,h5,h6,p,label,li,a
{
    font-family: 'Poppins';
}

h1,h2,h3,h4,h5
{
    margin: 0.2rem;
}

a
{
    text-decoration: none;
    text-align: center;
}

h6
{
    height: 100%;
    width: 100%;
}

.titulo
{
    text-align: center;
    border-bottom: 2px solid var(--color-zapp); 
    background-color: rgb(26,26,26); 
    padding: 1px;
}

@media (max-width: 416px) {
    #phoneZapp
    {
        width:10%;
        transform: translateX(0);
    }

    #rs,#ac,#hide,#tabZapp,#pcZapp
    {
        display: none;
    }

    #headerLogo
    {
        width: 20em;
    }
}